<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="listQuery" ref="listQuery">
      <el-form-item label="" prop="content">
        <el-input
          style="width: 300px"
          v-model="listQuery.content"
          placeholder="搜索姓名/所属商户号/站点号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="cityVal">
        <selectCity :cityVal.sync="listQuery.cityVal" type="2" />
      </el-form-item>
      <el-form-item label="类型" prop="merchant_Type">
        <el-select v-model="listQuery.merchant_Type" placeholder="类型">
          <el-option label="全部" value="0"></el-option>
          <el-option label="普通站点类型" value="1"></el-option>
          <el-option label="合伙站点类型" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="营业额" prop="turnoverSorting">
        <el-select v-model="listQuery.turnoverSorting" placeholder="营业额">
          <el-option label="从高到低" value="1"></el-option>
          <el-option label="从低到高" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="listQuery.state" placeholder="状态" clearable>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="5"></el-option>
          <el-option label="待验收" value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="date">
        <el-date-picker
          v-model="listQuery.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData(1)">查询</el-button>
        <el-button @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 统计及新增按钮 -->
    <div class="statistics-wrap">
      <div class="statistics">
        <p>
          总站点数：<span>{{ allCount }}</span>
        </p>
        <p>
          条件满足数：<span>{{ conditionsCount }}</span>
        </p>
      </div>
      <el-button type="primary" @click="createStation">新增站点</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      border
      :data="table.tableData"
      v-loading="table.loading"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="station_Code" label="站点编号" />
      <el-table-column prop="merchant_Num" label="所属商户号" />
      <el-table-column prop="station_Name" label="洗车站名称" />
      <el-table-column prop="scenario" label="场景" />
      <el-table-column prop="address" label="位置" />
      <el-table-column label="负责人" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.accountStoreMerchantRelationList.length === 1">
            {{ scope.row.accountStoreMerchantRelationList[0].truename || "" }}
          </div>
          <el-button
            v-else-if="scope.row.accountStoreMerchantRelationList.length > 1"
            size="mini"
            @click="openInfo(scope.row, 1)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.accountStoreMerchantRelationList.length === 1">
            {{ scope.row.accountStoreMerchantRelationList[0].mobile || "" }}
          </div>
          <el-button
            v-else-if="scope.row.accountStoreMerchantRelationList.length > 1"
            size="mini"
            @click="openInfo(scope.row, 1)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="machineCount" label="设备" />
      <el-table-column prop="device_Payoff" label="设备回本（万）" />
      <el-table-column prop="infrastructure_Payoff" label="基建回本（万）" />
      <el-table-column prop="income" label="总营业额（万）" />
      <el-table-column prop="orderCount" label="订单数（单）" />
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.merchant_Type == 10 ? "普通站点类型" : "合伙站点类型" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.addTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ statusEnum[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="推广码" width="130">
        <template slot-scope="scope">
          <el-button size="mini" @click="openInfo(scope.row, 1)"
            >查看二维码</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" @click="openInfo(scope.row, 1)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="table.total > 0"
      :total="table.total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getData"
    />
    <!-- 详情弹窗 -->
    <infoDialog :info="info" />
    <!-- 新增编辑弹窗 -->
    <actionDialog ref="actionDialog" @getData="getData" />
  </div>
</template>

<script>
import infoDialog from "./components/infoDialog";
import actionDialog from "./components/actionDialog";
import selectCity from "@/components/selectCity";

export default {
  name: "CarWashStation",
  data() {
    return {
      // 状态枚举
      statusEnum: {
        0: "正常",
        5: "停用",
        10: "待验收"
      },
      // 查询数据
      listQuery: {
        // 时间
        date: [],
        // 查询条数
        pageSize: 10,
        // 当前页
        pageIndex: 1,
        // 站点类型0全部，1普通加盟商，2合伙加盟商
        merchant_Type: "0",
        // 搜索内容（站点名、站点编号、商户号）
        content: "",
        // 城市
        cityVal: [],
        // 营业额排序1从高到低，2从低到高
        turnoverSorting: "1",
        // 状态默认 空，0正常，5停用，10待验收
        state: ""
      },
      // 表格
      table: {
        // 表格数据
        tableData: [],
        // 总条数
        total: 0,
        // 是否loading
        loading: false
      },
      // 详情
      info: {
        show: false,
        data: {}
      },
      // 总站点数
      allCount: 0,
      // 条件满足数
      conditionsCount: 0
    };
  },
  components: {
    infoDialog,
    actionDialog,
    selectCity
  },
  mounted() {
    if (this.$route.params.merchant_num) {
      this.listQuery.content = this.$route.params.merchant_num;
    }
    this.getData();
  },
  methods: {
    // 打开编辑弹窗
    async openEdit(row) {
      this.$refs.actionDialog.openEdit(row);
    },
    // 打开新增站点弹窗
    createStation() {
      this.$refs.actionDialog.openAdd();
    },
    // 打开详情
    openInfo(row) {
      this.info.data = row;
      this.info.show = true;
    },
    // 重置查询表单
    resetQueryForm() {
      this.$refs.listQuery.resetFields();
    },
    // 查询表格数据
    async getData(pageIndex) {
      if (pageIndex) {
        this.listQuery.pageIndex = pageIndex;
      }
      this.table.loading = true;
      let reqObj = {
        content: this.listQuery.content,
        startTime: this.listQuery.date && this.listQuery.date[0],
        endTime: this.listQuery.date && this.listQuery.date[1],
        pageSize: this.listQuery.pageSize,
        pageIndex: this.listQuery.pageIndex,
        merchant_Type: this.listQuery.merchant_Type,
        turnoverSorting: this.listQuery.turnoverSorting,
        state: this.listQuery.state,
        regionId: this.listQuery.cityVal.length
          ? this.listQuery.cityVal[this.listQuery.cityVal.length - 1]
          : ""
      };
      if (!reqObj.startTime) {
        delete reqObj.startTime;
        delete reqObj.endTime;
      }
      const res = await this.$api.carWashStation.GetSelfServiceCarWashStationList(
        reqObj
      );
      this.table.loading = false;
      this.table.tableData = res.data.data.list;
      this.table.total = res.data.data.total;
      this.conditionsCount = res.data.conditionsCount;
      this.allCount = res.data.allCount;
    }
  }
};
</script>
<style lang="scss" scoped>
.stats {
  margin-bottom: 10px;
  span {
    margin-right: 20px;
    i {
      font-style: normal;
      font-size: 20px;
    }
  }
}

.statistics-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .statistics {
    display: flex;
    p {
      margin-right: 20px;
      span {
        font-size: 20px;
      }
    }
  }
}
</style>
